Skip to content

Conversation

@ammar-agent
Copy link
Collaborator

Summary

Improves the styling of task tool outputs (task, task_await, task_list, task_terminate) with dedicated React components and a cohesive visual design.

Changes

New Components

  • TaskToolCall.tsx - Dedicated components for all task-related tools with:
    • Teal/cyan color theme distinct from plan (blue) and exec (purple) modes
    • Status badges with color-coded states (completed, running, queued, terminated, error)
    • Agent type badges (explore/exec)
    • Task ID display with monospace styling
    • Markdown rendering for task reports
    • Collapsible details with prompt preview when collapsed

Styling

  • New CSS variables: --color-task-mode, --surface-task-*
  • New utility classes: task-surface, task-divider

Storybook Coverage

  • App.task.stories.tsx with visual tests for:
    • Completed tasks with reports
    • Background/queued tasks
    • Multiple parallel tasks
    • Task await with mixed statuses
    • Task list with hierarchy
    • Task termination (success and error states)

Testing

  • make static-check passes
  • make storybook-build succeeds
  • All type exports added to src/common/types/tools.ts

Generated with mux • Model: anthropic:claude-opus-4-5 • Thinking: high

- Add TaskToolCall.tsx with components for task, task_await, task_list, task_terminate
- Add teal/cyan color theme for task surfaces (distinct from plan blue and exec purple)
- Add task-surface and task-divider CSS utilities
- Add status badges with color-coded states
- Add agent type badges (explore/exec)
- Add markdown rendering for task reports
- Route task tools to new components in ToolMessage.tsx
- Add type exports for task tool result types
- Add mock factories for task tools in storybook
- Add comprehensive App.task.stories.tsx with visual test coverage
- Consolidate from 10 stories to 3 comprehensive ones:
  - TaskWorkflow: full spawn/list/await sequence
  - TaskWithReport: completed task with markdown report
  - TaskErrorStates: error handling and termination
- Replace emoji icons with clean SVG TaskIcon (teal branching arrow)
- TaskIcon uses task-mode color for consistency with theme
@ammario ammario merged commit 13c0384 into main Dec 21, 2025
20 checks passed
@ammario ammario deleted the feat/task-tool-styling branch December 21, 2025 02:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants